<template>
  <div class="draw_main container">
    <div class="content container">
      <div class="icon">
        <!--        <img class="animate__tada animate__animated" src="../assets/imgs/摇一摇.png" alt="" v-show="yao">-->
      </div>
      <div class="qiantong" v-show="!isChouqian">
        <img class="" src="../assets/imgs/签筒.png" alt="">
        <div class="qian animate__animated animate__heartBeat" v-show="qian">
          <img :src="qianImg" alt="">
        </div>
      </div>
      <div class="cqgigf" v-show="isChouqian">
        <img class="cqgif" src="https://minsuguan.oss-cn-hangzhou.aliyuncs.com/icon/%E6%8A%BD%E7%AD%BE.gif" alt="">
      </div>
    </div>
    <div class="button" @click="cl">
      <img src="../assets/imgs/去破圈button.png" alt="">
    </div>
  </div>
</template>

<script setup>
import {ref} from "vue";
import {useCounterStore} from '@/stores/counter'
import {debounce, throttle, random} from 'lodash'
import {useRouter} from 'vue-router';
const router=useRouter()
const isChouqian = ref(false)
const counter = useCounterStore()
// 摇一摇图标
const yao = ref(true)
// 签
const qian = ref(false)
const qianImgData = [ {index: 2, imgurl: "https://minsuguan.oss-cn-hangzhou.aliyuncs.com/icon/A.png"},
                      {index: 1, imgurl: "https://minsuguan.oss-cn-hangzhou.aliyuncs.com/icon/E.png"},
                      {index: 3, imgurl: "https://minsuguan.oss-cn-hangzhou.aliyuncs.com/icon/I.png"},
                      {index: 0, imgurl: "https://minsuguan.oss-cn-hangzhou.aliyuncs.com/icon/S.png"}]



const qianwenData = [
  {
    index: 0,
    title: "微互动",
    contents: "<p>每逢佳节</p> <p>增进关系</p>",
    smal: "wgd.png",
    smaler: "MICRO-INTERACTIONred.png",
    nr: "在一般临展活动中，由于客观条件限制，确实没有办法让观众第一眼留下深刻印象时，最好的办法，是通过简单的微互动拉近距离，具体形式有“抽签”“祈愿”“寄语”“立志”等，也可以与传统节日有关…"
  },
  {
    index: 1,
    title: "预展览",
    contents: "<p>契合主题</p> <p>概括印象</p>",
    smal: "Exhibition.png",
    smaler: "yzlred.png",
    nr: "在拉近受众的心理距离后，需要让受众窥见展览精彩的一面，从心理上引起好奇心。但由于注意力不长，这里需要像电影预告片一样，提取展览最引人入胜的部分，需要前期就介入做好策划统筹工作。"
  },
  {
    index: 2,
    title: "趣分享",
    contents: "<p>有料有趣</p> <p>传播有我</p>",
    smal: "FUNNY-SHARING.png",
    smaler: "FUNNY-SHARINGred.png",
    nr: "如何让受众自发传播呢？核心在于这个事与他们自己存在关联，通常最直观的就是自拍或者上传照片等方式，但同时也可以是一种带微信ID昵称的表态，立FLAG，站队等。 +同时要注意网络言论安全。"
  },
  {
    index: 3,
    title: "奖现场",
    contents: "<p>线上带动</p> <p>线下领奖</p>",
    smal: "ON-SITE-ADWARD.png",
    smaler: "ON-SITE-ADWARDred.png",
    nr: "对于观展氛围尚不太浓厚的城市来说，或者具备一定客观条件的情况下，可以对到场的观众提供一点点实质奖励，拉高到场率。这既可以是文创产品，也可以通过解谜答题才能领取的限量奖品…"
  }
]
counter.data=qianwenData
localStorage.setItem("qianwenData", JSON.stringify(qianwenData))
const qianImg = ref(null)
var itemd
const cl = () => {
  throttled()
   itemd = qianImgData[random(0, 3)]
  qianImg.value = itemd.imgurl
  console.log(qianImg.value)
}
const throttled = () => {
  console.log(11)
  isChouqian.value = true
  yao.value = false
  setTimeout(() => {
    isChouqian.value = !isChouqian.value
    qian.value = true

  }, 1000)
  setTimeout(() => {
    console.log(itemd,2222)
    console.log(qianImgData[itemd.index].index,"====")
    router.push({
      name: "qianwen",
      query:{
        // indexs:JSON.stringify(qianwenData[itemd.index])
        indexs:qianImgData[itemd.index].index
      },

    })
  }, 1800)
}
</script>

<style scoped lang="scss">
.draw_main {
  width: 100vw;
  height: 100vh;
  background-image: url(../assets/imgs/bg.jpg);
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-direction: column;

  .content {
    width: 98%;
    //background-color: pink;
    height: 85%;
    background-image: url(../assets/imgs/抽签页.png);
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-around;
    box-sizing: border-box;
    padding-top: 15%;
    padding-bottom: 0px;

    img {
      width: 100%;
      height: 100%;
    }

    .icon {
      width: 66px;
      height: 80px;
    }

    .qiantong {
      width: 80%;
      height: 75%;
      margin-bottom: -20px;
      position: relative;

      .qian {
        position: absolute;
        width: 53%;
        top: -25%;
        display: flex;
        justify-content: center;
        left: 20%;
        //transform: translate(-50%);
        height: 120%;

        img {
          display: block;
        }
      }
    }

    .cqgigf {
      width: 79%;
      height: 88%;
      margin-bottom: -4px;
    }
  }

  .button {
    animation: scaleAnimation 3s infinite ease-in-out;
    width: 50%;
    height: 8%;
    //border: 1px solid;
    //margin-top: 13px;
    img {
      width: 100%;
      height: 100%;
    }

  }
}

@keyframes scaleAnimation {
  0% {
    transform: scale(0.9);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.9);
  }
}

</style>